import React, {useContext, useEffect, useState,useRef} from 'react';
import './css/picture.moudel.css'
import ctx from './context'
import axios from "axios";

function Picture() {
    // let imgArr:Array<String>
    let [imgArr,setimgArr]=useState(() => {
        let obj:Array<String>=[]
        return obj
    })
    const ref:any=useRef(window);
    let params:number=ref.current.location.href.split('detailid=')[1];
    useEffect(()=>{
        // ref.current.location.reload()
        axios.get("/getImg",{params:{"detailid":params}})
            .then((data)=>{
                let imgString:any=data.data[0];
                let imgArr:Array<String>=imgString.img.split("/")
                setimgArr(imgArr)
            })
    },[])
    return (
        <div id="brc-top_picture">
            <div id="brc-main_picture" className="col-md-6">
                <img src={`http://127.0.0.1:7001/public/img/${imgArr[0]}`}/>
            </div>
            <div id="brc-small_picture" className="col-md-6">
                <div className="row">
                    <div className="col-md-6">
                        <img src={`http://127.0.0.1:7001/public/img/${imgArr[1]}`} />
                    </div>
                    <div className="col-md-6">
                        <img src={`http://127.0.0.1:7001/public/img/${imgArr[2]}`} />
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-6">
                        <img src={`http://127.0.0.1:7001/public/img/${imgArr[3]}`} />
                    </div>
                    <div className="col-md-6">
                        <img src={`http://127.0.0.1:7001/public/img/${imgArr[4]}`} />
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Picture;